<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
    
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <title>
    VUE 初识 |  虎虎生辉
  </title>
  
  <link rel="shortcut icon" href="/blog/favicon.ico" />
  
  
<link rel="stylesheet" href="/blog/css/style.css">

  
<script src="/blog/js/pace.min.js"></script>


  

  

<meta name="generator" content="Hexo 6.0.0"></head>

</html>

<body>
  <div id="app">
    <main class="content">
      <section class="outer">
  <article id="post-VUEa" class="article article-type-post" itemscope
  itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
    <header class="article-header">
       
<h1 class="article-title sea-center" style="border-left:0" itemprop="name">
  VUE 初识
</h1>
  

    </header>
    

    
    <div class="article-meta">
      <a href="/blog/2018/08/01/VUEa/" class="article-date">
  <time datetime="2018-08-01T13:01:40.000Z" itemprop="datePublished">2018-08-01</time>
</a>
      
    </div>
    

    
    
    <div class="tocbot"></div>





    

    <div class="article-entry" itemprop="articleBody">
      


      

      
      <h1 id="一、why"><a href="#一、why" class="headerlink" title="一、why?"></a>一、why?</h1><h2 id="（一）性能更好"><a href="#（一）性能更好" class="headerlink" title="（一）性能更好"></a>（一）性能更好</h2><h3 id="1-优点"><a href="#1-优点" class="headerlink" title="1.优点"></a>1.优点</h3><ul>
<li>性能更好</li>
<li>视图、数据分离</li>
<li>维护成本低</li>
</ul>
<h3 id="2-性能"><a href="#2-性能" class="headerlink" title="2.性能"></a>2.性能</h3><ul>
<li>操作 DOM 影响性能，因为操作 DOM 是十分昂贵的</li>
<li>JS 和 DOM 是两种东西，每次连接都需要消耗性能</li>
<li>操作 DOM 会导致重排和重绘</li>
<li>访问 DOM 元素是有代价的，修改 DOM 元素的代价，则更为昂贵，因为它会导致浏览器重新计算页面的机会变化。</li>
</ul>
<h3 id="3-关系"><a href="#3-关系" class="headerlink" title="3.关系"></a>3.关系</h3><ul>
<li>DOM 是一个独立于语言的，用于操作 XML 和 HTML 文档的程序接口(API)。在浏览器中主要用于与 HTML 文档打交道，并且使用 DOM API 用来访问文档中的数据。</li>
<li>DOM 是个与语言无关的 API，它在浏览器中的接口却是用 JavaScript 来实现的。客户端脚本编程大多数都是在和底层文档打交道，DOM 就成为现在 JS 编码中的重要部分。</li>
<li>浏览器中通常会把 DOM 和 javascript 独立实现。</li>
</ul>
<h3 id="4-位置"><a href="#4-位置" class="headerlink" title="4.位置"></a>4.位置</h3><ul>
<li>在 IE 中，JavaScript 的实现名为 JScript，位于 jscript.dll 文件中，DOM 的实现则存在另一个库中，名为 mshtml.dll（内部称为 trident）。</li>
<li>safari 中的 DOM 和渲染是使用 webkit 中的 webcore 实现，JavaScript 部分是由独立的 SquirelFish 引擎来实现。</li>
<li>google chrome 使用 webkit 中的 webCore 库来渲染页面，但 JavaScript 引擎是他们自己研发的，名为 V8。</li>
<li>firefox 的 JavaScript 引擎名为 TraceMonkey，与名为 Gecko 的渲染引擎相互独立。</li>
</ul>
<h3 id="5-渲染过程"><a href="#5-渲染过程" class="headerlink" title="5.渲染过程"></a>5.渲染过程</h3><ul>
<li>浏览器下载完页面中的所有组件：HTML、JavaScript、CSS、图片后，会发生这样的过程：<ul>
<li>解析 HTML，构建 DOM 树 + 解析 CSS，生成 CSS 规则树</li>
<li>合并 DOM 树和 CSS 规则树，生成 render 树</li>
<li>布局 render 树，负责各元素尺寸、位置的计算</li>
<li>绘制 render 树，绘制页面像素信息</li>
<li>浏览器会将各层的信息发送给 GPU，GPU 将各层合成<img src="./render.png"></li>
</ul>
</li>
</ul>
<h3 id="6-重排"><a href="#6-重排" class="headerlink" title="6.重排"></a>6.重排</h3><ul>
<li>当页面布局和几何属性改变时就需要重排：<ul>
<li>添加或删除可见的 DOM 元素。</li>
<li>元素位置改变</li>
<li>元素尺寸改变( 外边距、内边距、边框厚度、宽度、高度等)</li>
<li>内容改变，例：文本改变或图片被另一个不同尺寸的图片替代</li>
<li>页面渲染器初始化</li>
<li>浏览器窗口尺寸改变<br><a target="_blank" rel="noopener" href="https://csstriggers.com/">各 css 属性对重排重绘的影响</a></li>
</ul>
</li>
<li>发生重排的属性：<br>offsetTop、offsetLeft、offsetWidth、offsetHeight<br>scrollTop、scrollLeft、scrollWidth、scrollHeight<br>clientTop、clientLeft、clientWidth、clientHeight<br>getComputedStyle()</li>
</ul>
<h3 id="7-重绘"><a href="#7-重绘" class="headerlink" title="7.重绘"></a>7.重绘</h3><ul>
<li>当页面和元素的颜色相关属性发生变化时会发生重绘。</li>
</ul>
<h3 id="8-虚拟-DOM"><a href="#8-虚拟-DOM" class="headerlink" title="8.虚拟 DOM"></a>8.虚拟 DOM</h3><ul>
<li>vue 的核心是虚拟 dom，使用虚拟 dom 可以减少 dom 的操作，从而提升应用的性能。</li>
<li>在前端的三种语言（html、css、javaScript）中，只有 JS 是一种编程语言，只有 JS 能做到判断、循环、递归、能够实现各种逻辑、实现各种算法。<img src="./html.png">
<img src="./VDOM.png"></li>
</ul>
<h2 id="（二）视图、数据分离"><a href="#（二）视图、数据分离" class="headerlink" title="（二）视图、数据分离"></a>（二）视图、数据分离</h2><h2 id="（三）维护成本低"><a href="#（三）维护成本低" class="headerlink" title="（三）维护成本低"></a>（三）维护成本低</h2><h1 id="二、what？"><a href="#二、what？" class="headerlink" title="二、what？"></a>二、what？</h1><h2 id="（一）渐进式"><a href="#（一）渐进式" class="headerlink" title="（一）渐进式"></a>（一）渐进式</h2><h2 id="（二）MVVM"><a href="#（二）MVVM" class="headerlink" title="（二）MVVM"></a>（二）MVVM</h2><h1 id="三、how"><a href="#三、how" class="headerlink" title="三、how?"></a>三、how?</h1><h2 id="（一）基础-API"><a href="#（一）基础-API" class="headerlink" title="（一）基础 API"></a>（一）基础 API</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;&quot;</span> <span class="attr">app</span>&gt;</span>&#123;&#123; name &#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    <span class="attr">el</span>: <span class="string">&quot;#app&quot;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">name</span>: <span class="string">&quot;hello world&quot;</span></span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  &#125;);</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="1-模板语法"><a href="#1-模板语法" class="headerlink" title="1.模板语法"></a>1.模板语法</h3><h4 id="（1）文本"><a href="#（1）文本" class="headerlink" title="（1）文本"></a>（1）文本</h4><ul>
<li><p>数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span>&#123;&#123; msg &#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
<li><p>通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-once</span>&gt;</span>&#123;&#123; msg &#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
<li><p>使用 v-text 指令填充文本</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-text</span>=<span class="string">&quot;str&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
</ul>
<h4 id="（2）html"><a href="#（2）html" class="headerlink" title="（2）html"></a>（2）html</h4><ul>
<li>双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-html</span>=<span class="string">&quot;htmlStr&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
<li>注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。若同时使用，则忽略局部模板。<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-html</span>=<span class="string">&quot;htmlStr&quot;</span>&gt;</span>&#123;&#123; msg &#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
</ul>
<h4 id="（3）attribute"><a href="#（3）attribute" class="headerlink" title="（3）attribute"></a>（3）attribute</h4><ul>
<li><p>Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">v-bind:href</span>=<span class="string">&quot;url&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">:href</span>=<span class="string">&quot;url&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
<li><p>对于布尔 attribute (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同，如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的 &lt;button&gt; 元素中。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">v-bind:disabled</span>=<span class="string">&quot;isButtonDisabled&quot;</span>&gt;</span>Button<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">:disabled</span>=<span class="string">&quot;isButtonDisabled&quot;</span>&gt;</span>Button<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
</ul>
<h4 id="（4）js-表达式"><a href="#（4）js-表达式" class="headerlink" title="（4）js 表达式"></a>（4）js 表达式</h4><ul>
<li>表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式。</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;&#123; number + 1 &#125;&#125; &#123;&#123; ok ? &#x27;YES&#x27; : &#x27;NO&#x27; &#125;&#125; &#123;&#123;</span><br><span class="line">message.split(&#x27;&#x27;).reverse().join(&#x27;&#x27;)&#125;&#125;</span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-bind:id</span>=<span class="string">&quot;&#x27;list-&#x27; + id&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。</li>
</ul>
<h4 id="（5）事件"><a href="#（5）事件" class="headerlink" title="（5）事件"></a>（5）事件</h4><ul>
<li>Mustache 语法不能作用在 HTML attribute 上，遇到句柄事件应该使用 v-on 指令：<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-on:click</span>=<span class="string">&quot;changeEvent&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> @<span class="attr">click</span>=<span class="string">&quot;changeEvent&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
</ul>
<hr>
<h3 id="2-计算属性与监听器"><a href="#2-计算属性与监听器" class="headerlink" title="2.计算属性与监听器"></a>2.计算属性与监听器</h3><h4 id="（1）methods"><a href="#（1）methods" class="headerlink" title="（1）methods"></a>（1）methods</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">    &#123;&#123;msg()&#125;&#125;</span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>&#123;&#123;job&#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="keyword">let</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    <span class="attr">el</span>: <span class="string">&quot;#app&quot;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">name</span>: <span class="string">&quot;小明&quot;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">age</span>: <span class="string">&quot;18岁&quot;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">job</span>: <span class="string">&quot;是一名飞行员&quot;</span></span></span><br><span class="line"><span class="javascript">    &#125;,</span></span><br><span class="line"><span class="javascript">    <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="function"><span class="title">msg</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log(<span class="string">`-----methods------`</span>);</span></span><br><span class="line"><span class="javascript">        <span class="keyword">return</span> <span class="built_in">this</span>.name + <span class="built_in">this</span>.age;</span></span><br><span class="line"><span class="javascript">      &#125;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  &#125;);</span></span><br><span class="line"><span class="javascript">  vm.job = <span class="string">&quot;是一名教师&quot;</span>;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>methods 中定义方法，挂在到 vue 实例上，可以直接访问。</li>
<li>只要页面重新渲染，都会执行一遍所有的方法。</li>
<li>如上，msg 方法并没有依赖 data 的 job 属性，当 job 变化时，msg 方法也会被执行（会输出：—–methods——）；</li>
</ul>
<h4 id="（2）watch"><a href="#（2）watch" class="headerlink" title="（2）watch"></a>（2）watch</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">    &#123;&#123;msg&#125;&#125;</span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>&#123;&#123;job&#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="keyword">let</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    <span class="attr">el</span>: <span class="string">&quot;#app&quot;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">name</span>: <span class="string">&quot;小明&quot;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">age</span>: <span class="string">&quot;18岁&quot;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">job</span>: <span class="string">&quot;是一名飞行员&quot;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">msg</span>: <span class="string">&quot;小明18岁&quot;</span></span></span><br><span class="line"><span class="javascript">    &#125;,</span></span><br><span class="line"><span class="javascript">    <span class="attr">watch</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="function"><span class="title">name</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log(<span class="string">`-----watch------`</span>);</span></span><br><span class="line"><span class="javascript">        <span class="built_in">this</span>.msg = <span class="built_in">this</span>.name + <span class="built_in">this</span>.age;</span></span><br><span class="line"><span class="javascript">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="function"><span class="title">age</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log(<span class="string">`-----watch------`</span>);</span></span><br><span class="line"><span class="javascript">        <span class="built_in">this</span>.msg = <span class="built_in">this</span>.name + <span class="built_in">this</span>.age;</span></span><br><span class="line"><span class="javascript">      &#125;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  &#125;);</span></span><br><span class="line"><span class="javascript">  vm.job = <span class="string">&quot;是一名教师&quot;</span>;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>watch 中监听某个属性变化,并不能直接定义一个新属性。</li>
<li>只有监听的属性变化，才会被执行。</li>
<li>如上，watch 并没有监听 data 的 job 属性，当 job 变化时，不会输出：—–watch——；</li>
</ul>
<h4 id="（3）computed"><a href="#（3）computed" class="headerlink" title="（3）computed"></a>（3）computed</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">    &#123;&#123;msg&#125;&#125;</span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>&#123;&#123;job&#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="keyword">let</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    <span class="attr">el</span>: <span class="string">&quot;#app&quot;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">name</span>: <span class="string">&quot;小明&quot;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">age</span>: <span class="string">&quot; 18岁&quot;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">job</span>: <span class="string">&quot; 是一名飞行员&quot;</span></span></span><br><span class="line"><span class="javascript">    &#125;,</span></span><br><span class="line"><span class="javascript">    <span class="attr">computed</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">msg</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="function"><span class="title">get</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">          <span class="built_in">console</span>.log(<span class="string">&quot;-----computed-------&quot;</span>);</span></span><br><span class="line"><span class="javascript">          <span class="keyword">return</span> <span class="built_in">this</span>.name + <span class="built_in">this</span>.age;</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">        <span class="function"><span class="title">set</span>(<span class="params">value</span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">          <span class="built_in">console</span>.log(<span class="string">&quot;-----computed-------&quot;</span>);</span></span><br><span class="line"><span class="javascript">          <span class="keyword">let</span> arr = value.split(<span class="string">&quot; &quot;</span>);</span></span><br><span class="line"><span class="javascript">          <span class="built_in">this</span>.name = arr[<span class="number">0</span>];</span></span><br><span class="line"><span class="javascript">          <span class="built_in">this</span>.age = arr[<span class="number">1</span>];</span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">      &#125;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  &#125;);</span></span><br><span class="line"><span class="javascript">  vm.job = <span class="string">&quot;是一名教师&quot;</span>;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>computed 中定义某个属性为计算属性, 也可直接定义一个新属性。</li>
<li>只有依赖的属性变化，才会被执行。</li>
<li>如上，computed 中 msg 并没有依赖 data 的 job 属性，当 job 变化时，不会输出：—–computed——；</li>
</ul>
<hr>
<h3 id="3-类与样式"><a href="#3-类与样式" class="headerlink" title="3.类与样式"></a>3.类与样式</h3><h4 id="（1）class"><a href="#（1）class" class="headerlink" title="（1）class"></a>（1）class</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;ie=edge&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>app<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">      <span class="selector-id">#app</span> <span class="selector-tag">div</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">width</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">height</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">text-align</span>: center;</span></span><br><span class="line"><span class="css">        <span class="attribute">background-color</span>: pink;</span></span><br><span class="line"><span class="css">        <span class="attribute">line-height</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">margin-top</span>: <span class="number">20px</span>;</span></span><br><span class="line"><span class="css">      &#125;</span></span><br><span class="line"><span class="css">      <span class="selector-class">.red</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">background-color</span>: red <span class="meta">!important</span>;</span></span><br><span class="line"><span class="css">      &#125;</span></span><br><span class="line"><span class="css">      <span class="selector-class">.border</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">border</span>: <span class="number">5px</span> solid;</span></span><br><span class="line"><span class="css">        <span class="attribute">box-sizing</span>: border-box;</span></span><br><span class="line"><span class="css">      &#125;</span></span><br><span class="line"><span class="css">    </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">:class</span>=<span class="string">&quot;className&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;changeBg1&quot;</span>&gt;</span>1<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">:class</span>=<span class="string">&quot;[className1, className2]&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;changeBg2&quot;</span>&gt;</span>2<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">:class</span>=<span class="string">&quot;&#123;&#x27;red&#x27;: isRed&#125;&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;changeBg3&quot;</span>&gt;</span>3<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">      <span class="keyword">let</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">el</span>: <span class="string">&quot;#app&quot;</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="javascript">          <span class="attr">msg</span>: <span class="string">&quot;小明&quot;</span>,</span></span><br><span class="line"><span class="javascript">          <span class="attr">className</span>: <span class="string">&quot;&quot;</span>,</span></span><br><span class="line"><span class="javascript">          <span class="attr">className1</span>: <span class="string">&quot;&quot;</span>,</span></span><br><span class="line"><span class="javascript">          <span class="attr">className2</span>: <span class="string">&quot;border&quot;</span>,</span></span><br><span class="line"><span class="javascript">          <span class="attr">isRed</span>: <span class="literal">false</span></span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="javascript">          <span class="function"><span class="title">changeBg1</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">            <span class="built_in">this</span>.className = <span class="built_in">this</span>.className === <span class="string">&quot;&quot;</span> ? <span class="string">&quot;red&quot;</span> : <span class="string">&quot;&quot;</span>;</span></span><br><span class="line"><span class="javascript">          &#125;,</span></span><br><span class="line"><span class="javascript">          <span class="function"><span class="title">changeBg2</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">            <span class="built_in">this</span>.className1 = <span class="built_in">this</span>.className1 === <span class="string">&quot;&quot;</span> ? <span class="string">&quot;red&quot;</span> : <span class="string">&quot;&quot;</span>;</span></span><br><span class="line"><span class="javascript">          &#125;,</span></span><br><span class="line"><span class="javascript">          <span class="function"><span class="title">changeBg3</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">            <span class="built_in">this</span>.isRed = !<span class="built_in">this</span>.isRed;</span></span><br><span class="line"><span class="javascript">          &#125;</span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">      &#125;);</span></span><br><span class="line"><span class="javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>使用变量 className, 变量的值会被应用为 class 的属性值</li>
<li>当使用多个类名的时候，可以使用数组（classList）, 每一项的值会被应用为 class 的属性值</li>
<li>可以使用对象，动态的控制类名是否被应用, 键值对中的 key 对应 className，value 的 boolean 值决定当前类名是否应用</li>
</ul>
<h4 id="（2）style"><a href="#（2）style" class="headerlink" title="（2）style"></a>（2）style</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;ie=edge&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>app<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">      <span class="selector-id">#app</span> <span class="selector-tag">div</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">width</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">height</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">text-align</span>: center;</span></span><br><span class="line"><span class="css">        <span class="attribute">background-color</span>: pink;</span></span><br><span class="line"><span class="css">        <span class="attribute">line-height</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">margin-top</span>: <span class="number">20px</span>;</span></span><br><span class="line"><span class="css">      &#125;</span></span><br><span class="line"><span class="css">    </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">:style</span>=<span class="string">&quot;style&quot;</span>&gt;</span>1<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">:style</span>=<span class="string">&quot;[style1, style2]&quot;</span>&gt;</span>2<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">:style</span>=<span class="string">&quot;&#123;color: color&#125;&quot;</span>&gt;</span>3<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">      <span class="keyword">let</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">el</span>: <span class="string">&quot;#app&quot;</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="javascript">          <span class="attr">style</span>: &#123;</span></span><br><span class="line"><span class="javascript">            <span class="attr">fontSize</span>: <span class="string">&quot;30px&quot;</span></span></span><br><span class="line"><span class="javascript">          &#125;,</span></span><br><span class="line"><span class="javascript">          <span class="attr">style1</span>: &#123;</span></span><br><span class="line"><span class="javascript">            <span class="attr">fontSize</span>: <span class="string">&quot;20px&quot;</span>,</span></span><br><span class="line"><span class="javascript">            <span class="attr">fontStyle</span>: <span class="string">&quot;bolder&quot;</span>,</span></span><br><span class="line"><span class="javascript">            <span class="attr">color</span>: <span class="string">&quot;#fff&quot;</span></span></span><br><span class="line"><span class="javascript">          &#125;,</span></span><br><span class="line"><span class="javascript">          <span class="attr">style2</span>: &#123;</span></span><br><span class="line"><span class="javascript">            <span class="attr">backgroundColor</span>: <span class="string">&quot;blue&quot;</span></span></span><br><span class="line"><span class="javascript">          &#125;,</span></span><br><span class="line"><span class="javascript">          <span class="attr">color</span>: <span class="string">&quot;red&quot;</span></span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">      &#125;);</span></span><br><span class="line"><span class="javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>可以应用为一个对象，键值对中的 key 对应样式属性，value 对应样式属性值</li>
<li>当应用多个对象时，通过数组将对象集中起来</li>
</ul>
<hr>
<h3 id="4-条件渲染"><a href="#4-条件渲染" class="headerlink" title="4.条件渲染"></a>4.条件渲染</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-if</span>=<span class="string">&quot;show === 1&quot;</span>&gt;</span>中国70周年庆典1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-else-if</span>=<span class="string">&quot;show === 2&quot;</span>&gt;</span>中国70周年庆典2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-else-if</span>=<span class="string">&quot;show === 3&quot;</span>&gt;</span>中国70周年庆典3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-else-if</span>=<span class="string">&quot;show === 4&quot;</span>&gt;</span>中国70周年庆典4<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-else</span>&gt;</span>中国70周年庆典5<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;change&quot;</span>&gt;</span>增加<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="keyword">let</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    <span class="attr">el</span>: <span class="string">&quot;#app&quot;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">show</span>: <span class="number">1</span></span></span><br><span class="line"><span class="javascript">    &#125;,</span></span><br><span class="line"><span class="javascript">    <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="function"><span class="title">change</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">        <span class="built_in">this</span>.show++;</span></span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.log(<span class="built_in">this</span>.show);</span></span><br><span class="line"><span class="javascript">      &#125;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  &#125;);</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="（1）v-if"><a href="#（1）v-if" class="headerlink" title="（1）v-if"></a>（1）v-if</h4><ul>
<li>当 v-if 的属性值为 true 时，当前元素才会被渲染</li>
<li>若 v-if 的属性值为 false，当前元素会被直接移除</li>
</ul>
<h4 id="（2）v-else-if"><a href="#（2）v-else-if" class="headerlink" title="（2）v-else-if"></a>（2）v-else-if</h4><ul>
<li>当 v-else-if 的属性值为 true 时，当前元素才会被渲染</li>
<li>若 v-else-if 的属性值为 false，当前元素会被直接移除</li>
</ul>
<h4 id="（3）v-else"><a href="#（3）v-else" class="headerlink" title="（3）v-else"></a>（3）v-else</h4><ul>
<li>与 v-if、v-else-if 配合使用</li>
<li><font color=red>中间不能出现第三者，配合使用的元素必须是相连的兄弟元素</font></li>
</ul>
<h4 id="（4）v-show"><a href="#（4）v-show" class="headerlink" title="（4）v-show"></a>（4）v-show</h4><ul>
<li>当 v-show 的属性值为 true 时，当前元素才会显示</li>
<li>若 v-show 的属性值为 false，当前元素会添加 display: none 行间样式</li>
</ul>
<h4 id="（5）dom-复用"><a href="#（5）dom-复用" class="headerlink" title="（5）dom 复用"></a>（5）dom 复用</h4><ul>
<li>vue 会自动的复用页面已经存在的 dom</li>
<li>通过定义不一样的 key 属性来取消复用</li>
</ul>
<hr>
<h3 id="5-列表渲染"><a href="#5-列表渲染" class="headerlink" title="5.列表渲染"></a>5.列表渲染</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">&quot;X-UA-Compatible&quot;</span> <span class="attr">content</span>=<span class="string">&quot;ie=edge&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>app<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">      <span class="selector-tag">ul</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">width</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="css">      &#125;</span></span><br><span class="line"><span class="css">      <span class="selector-tag">ul</span> <span class="selector-tag">li</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">margin-bottom</span>: <span class="number">20px</span>;</span></span><br><span class="line"><span class="css">      &#125;</span></span><br><span class="line"><span class="css">      <span class="selector-tag">ul</span> <span class="selector-tag">li</span> <span class="selector-tag">span</span><span class="selector-class">.new</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">background-color</span>: red;</span></span><br><span class="line"><span class="css">        <span class="attribute">color</span>: <span class="number">#fff</span>;</span></span><br><span class="line"><span class="css">      &#125;</span></span><br><span class="line"><span class="css">    </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;item in list&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;item.id&quot;</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">span</span>&gt;</span>&#123;&#123;item.title&#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;new&quot;</span> <span class="attr">v-show</span>=<span class="string">&quot;item.new&quot;</span>&gt;</span>新<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">      <span class="keyword">let</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">el</span>: <span class="string">&quot;#app&quot;</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="javascript">          <span class="attr">list</span>: [</span></span><br><span class="line"><span class="javascript">            &#123;</span></span><br><span class="line"><span class="javascript">              <span class="attr">title</span>: <span class="string">&quot;中国70周年庆典&quot;</span>,</span></span><br><span class="line"><span class="javascript">              <span class="attr">new</span>: <span class="literal">false</span>,</span></span><br><span class="line"><span class="javascript">              <span class="attr">id</span>: <span class="number">0</span></span></span><br><span class="line"><span class="javascript">            &#125;,</span></span><br><span class="line"><span class="javascript">            &#123;</span></span><br><span class="line"><span class="javascript">              <span class="attr">title</span>: <span class="string">&quot;新型冠状病毒&quot;</span>,</span></span><br><span class="line"><span class="javascript">              <span class="attr">new</span>: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">              <span class="attr">id</span>: <span class="number">1</span></span></span><br><span class="line"><span class="javascript">            &#125;,</span></span><br><span class="line"><span class="javascript">            &#123;</span></span><br><span class="line"><span class="javascript">              <span class="attr">title</span>: <span class="string">&quot;NBA巨星科比坠机身亡&quot;</span>,</span></span><br><span class="line"><span class="javascript">              <span class="attr">new</span>: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">              <span class="attr">id</span>: <span class="number">2</span></span></span><br><span class="line"><span class="javascript">            &#125;,</span></span><br><span class="line"><span class="javascript">            &#123;</span></span><br><span class="line"><span class="javascript">              <span class="attr">title</span>: <span class="string">&quot;澳大利亚大火&quot;</span>,</span></span><br><span class="line"><span class="javascript">              <span class="attr">new</span>: <span class="literal">false</span>,</span></span><br><span class="line"><span class="javascript">              <span class="attr">id</span>: <span class="number">3</span></span></span><br><span class="line"><span class="javascript">            &#125;,</span></span><br><span class="line"><span class="javascript">            &#123;</span></span><br><span class="line"><span class="javascript">              <span class="attr">title</span>: <span class="string">&quot;2020鼠年春晚&quot;</span>,</span></span><br><span class="line"><span class="javascript">              <span class="attr">new</span>: <span class="literal">false</span>,</span></span><br><span class="line"><span class="javascript">              <span class="attr">id</span>: <span class="number">4</span></span></span><br><span class="line"><span class="javascript">            &#125;</span></span><br><span class="line"><span class="javascript">          ]</span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">      &#125;);</span></span><br><span class="line"><span class="javascript">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="（1）v-for"><a href="#（1）v-for" class="headerlink" title="（1）v-for"></a>（1）v-for</h4><ul>
<li>v-for 属性值可以是一个数组（listArr）</li>
<li>子元素使用的每一项 item 需要手动在 v-for 中定义（item in listArr）</li>
<li>v-for 属性值也可以是一个对象（listObj）</li>
<li>子元素使用的数据（键、值、索引）需要手动在 v-for 中定义（(key, value, index) in listObj）</li>
<li>建议使用 v-bind:key 定义一个唯一的值，复用 dom 提高效率（:key=item.id）</li>
</ul>
<h4 id="（2）数组更新检测"><a href="#（2）数组更新检测" class="headerlink" title="（2）数组更新检测"></a>（2）数组更新检测</h4><ul>
<li><font color=red>在数据数组中利用索引手动增减数据，视图不会更新</font></li>
<li><font color=red>改变数据数组的引用，视图会更新</font></li>
<li><font color=red>Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新</font></li>
<li>数组变异方法：<ul>
<li>push()</li>
<li>pop()</li>
<li>shift()</li>
<li>unshift()</li>
<li>splice()</li>
<li>sort()</li>
<li>reverse()</li>
</ul>
</li>
</ul>
<h4 id="（3）对象检测更新"><a href="#（3）对象检测更新" class="headerlink" title="（3）对象检测更新"></a>（3）对象检测更新</h4><ul>
<li><font color=red>在数据对象中利用引用手动增减属性，视图不会更新</font></li>
<li><font color=red>改变数据对象的引用，视图会更新</font></li>
<li><font color=red>使用 Vue.set(obj, prop, data)，视图会更新</font></li>
</ul>
<h4 id="（4）模板-template"><a href="#（4）模板-template" class="headerlink" title="（4）模板 template"></a>（4）模板 template</h4><ul>
<li>列表渲染可以使用 template 模板作为某些元素的父元素进行嵌套方便循环</li>
<li>当循环结束，template 不会存在视图结构中</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span> <span class="attr">v-for</span>=<span class="string">&quot;item in list&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span>&#123;&#123;item.content&#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br></pre></td></tr></table></figure>

<hr>
<h3 id="6-双向数据绑定"><a href="#6-双向数据绑定" class="headerlink" title="6.双向数据绑定"></a>6.双向数据绑定</h3><h4 id="（1）v-model"><a href="#（1）v-model" class="headerlink" title="（1）v-model"></a>（1）v-model</h4><ul>
<li>你可以用 v-model 指令在表单 &lt;input&gt;、&lt;textarea&gt; 及 &lt;select&gt; 元素上创建双向数据绑定。</li>
<li>v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：<ul>
<li>text 和 textarea 元素使用 value 属性和 input 事件；</li>
<li>checkbox 和 radio 使用 checked 属性和 change 事件；</li>
<li>select 字段将 value 作为 prop 并将 change 作为事件。</li>
</ul>
</li>
<li><font color=red>在文本区域插值 (&lt;textarea&gt;</textarea>) 并不会生效，应用 v-model 来代替。</font></li>
<li>单个复选框，绑定到布尔值：多个复选框，绑定到同一个数组：</li>
<li>如果 v-model 表达式的初始值未能匹配任何选项，&lt;select&gt; 元素将被渲染为“未选中”状态。</li>
</ul>
<h4 id="（2）修饰符"><a href="#（2）修饰符" class="headerlink" title="（2）修饰符"></a>（2）修饰符</h4><ul>
<li>在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：</li>
<li>如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：在 type=”number” 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。</li>
<li>如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：</li>
</ul>
<hr>
<h3 id="7-事件处理"><a href="#7-事件处理" class="headerlink" title="7.事件处理"></a>7.事件处理</h3><h4 id="（1）监听"><a href="#（1）监听" class="headerlink" title="（1）监听"></a>（1）监听</h4><ul>
<li>可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。</li>
<li>然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。</li>
<li>除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法并且传参。</li>
</ul>
<h4 id="（2）修饰符-1"><a href="#（2）修饰符-1" class="headerlink" title="（2）修饰符"></a>（2）修饰符</h4><ul>
<li>Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。<ul>
<li>.stop 阻止冒泡</li>
<li>.prevent 阻止默认事件</li>
<li>.capture 捕获模式</li>
<li>.self 自身事件源</li>
<li>.once 执行一次</li>
<li>.passive 不阻止默认事件</li>
</ul>
</li>
</ul>
<h4 id="（3）按键修饰符"><a href="#（3）按键修饰符" class="headerlink" title="（3）按键修饰符"></a>（3）按键修饰符</h4><ul>
<li><p>你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。</p>
<blockquote>
<p>&lt;input v-on:keyup.page-down=”onPageDown”&gt;</p>
</blockquote>
</li>
<li><p>使用 keyCode attribute 也是允许的：</p>
<blockquote>
<p>&lt;input v-on:keyup.13=”submit”&gt;</p>
</blockquote>
</li>
<li><p>为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：</p>
<ul>
<li>.enter</li>
<li>.tab</li>
<li>.delete (捕获“删除”和“退格”键)</li>
<li>.esc</li>
<li>.space</li>
<li>.up</li>
<li>.down</li>
<li>.left</li>
<li>.right</li>
</ul>
</li>
<li><p>你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：</p>
<blockquote>
<p>可以使用 v-on:keyup.f1 Vue.config.keyCodes.f1 = 112</p>
</blockquote>
</li>
</ul>
<h4 id="（4）系统修饰键"><a href="#（4）系统修饰键" class="headerlink" title="（4）系统修饰键"></a>（4）系统修饰键</h4><ul>
<li>可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。<ul>
<li>.ctrl</li>
<li>.alt</li>
<li>.shift</li>
<li>.meta</li>
<li>.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。</li>
</ul>
</li>
</ul>
<h4 id="（5）鼠标修饰符"><a href="#（5）鼠标修饰符" class="headerlink" title="（5）鼠标修饰符"></a>（5）鼠标修饰符</h4><ul>
<li>鼠标按钮修饰符<ul>
<li>.left</li>
<li>.right</li>
<li>.middle</li>
</ul>
</li>
</ul>
<hr>
<h2 id="（二）组件"><a href="#（二）组件" class="headerlink" title="（二）组件"></a>（二）组件</h2><h3 id="1-注册组件"><a href="#1-注册组件" class="headerlink" title="1.注册组件"></a>1.注册组件</h3><h4 id="（1）全局组件"><a href="#（1）全局组件" class="headerlink" title="（1）全局组件"></a>（1）全局组件</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">tag-name</span> <span class="attr">:prop-name</span>=<span class="string">&quot;data&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">tag-name</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">  Vue.component(<span class="string">&quot;tagName&quot;</span>, &#123;</span></span><br><span class="line"><span class="javascript">    <span class="attr">props</span>: [<span class="string">&quot;propName&quot;</span>],</span></span><br><span class="line"><span class="javascript">    <span class="attr">template</span>: <span class="string">&quot;&lt;html&gt;&#123;&#123;propName&#125;&#125;&lt;/html&gt;&quot;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">      <span class="keyword">return</span> &#123;&#125;;</span></span><br><span class="line"><span class="javascript">    &#125;,</span></span><br><span class="line"><span class="javascript">    <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="function"><span class="title">getData</span>(<span class="params"></span>)</span> &#123;&#125;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  &#125;);</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 &lt;my-component-name&gt;。</li>
</ul>
<h4 id="（2）局部组件"><a href="#（2）局部组件" class="headerlink" title="（2）局部组件"></a>（2）局部组件</h4><ul>
<li>全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">tag-name</span> <span class="attr">:prop-name</span>=<span class="string">&quot;data&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">tag-name</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    <span class="attr">el</span>: <span class="string">&quot;#app&quot;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="attr">components</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">tagName</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">props</span>: [<span class="string">&quot;propName&quot;</span>],</span></span><br><span class="line"><span class="javascript">        <span class="attr">template</span>: <span class="string">&quot;&lt;html&gt;&#123;&#123;propName&#125;&#125;&lt;/html&gt;&quot;</span>,</span></span><br><span class="line"><span class="javascript">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">          <span class="keyword">return</span> &#123;&#125;;</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="javascript">          <span class="function"><span class="title">getData</span>(<span class="params"></span>)</span> &#123;&#125;</span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">      &#125;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  &#125;);</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<hr>
<h4 id="（3）特别注意"><a href="#（3）特别注意" class="headerlink" title="（3）特别注意"></a>（3）特别注意</h4><ul>
<li>取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：</li>
<li>every component must have a single root element (每个组件必须只有一个根元素)。你可以将模板的内容包裹在一个父元素内，来修复这个问题；</li>
<li>当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个属性。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中：</li>
</ul>
<h3 id="2-数据传递"><a href="#2-数据传递" class="headerlink" title="2.数据传递"></a>2.数据传递</h3><h4 id="（1）父传子"><a href="#（1）父传子" class="headerlink" title="（1）父传子"></a>（1）父传子</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 静态传递， 组件显示内容为 val --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">my-component</span> <span class="attr">content</span>=<span class="string">&quot;val&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">my-component</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 动态传递，组件显示内容为 hello world!!! --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">my-component</span> <span class="attr">:content</span>=<span class="string">&quot;val&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">my-component</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="keyword">let</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    <span class="attr">el</span>: <span class="string">&quot;#app&quot;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">val</span>: <span class="string">&quot;hello world!!!&quot;</span></span></span><br><span class="line"><span class="javascript">    &#125;,</span></span><br><span class="line"><span class="javascript">    <span class="attr">components</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">myComponent</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">props</span>: [<span class="string">&quot;content&quot;</span>],</span></span><br><span class="line"><span class="javascript">        <span class="attr">template</span>: <span class="string">`&lt;div&gt;&#123;&#123;content&#125;&#125;&lt;/div&gt;`</span></span></span><br><span class="line"><span class="javascript">      &#125;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  &#125;);</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>在父组件上通过自定义属性进行传值，属性名为接收的变量名，属性值为传递的数据</li>
<li>在子组件中通过 props 属性的值来对应接收的数据</li>
</ul>
<h4 id="（2）子传父"><a href="#（2）子传父" class="headerlink" title="（2）子传父"></a>（2）子传父</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 静态传递， 组件显示内容为 val --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">my-component</span> <span class="attr">content</span>=<span class="string">&quot;val&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">my-component</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 动态传递，组件显示内容为 hello world!!! --&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 监听自定义事件transfer，并由getData事件处理程序处理 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">my-component</span> <span class="attr">:content</span>=<span class="string">&quot;val&quot;</span> @<span class="attr">transfer</span>=<span class="string">&quot;getData&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">my-component</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="keyword">let</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    <span class="attr">el</span>: <span class="string">&quot;#app&quot;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">val</span>: <span class="string">&quot;hello world!!!&quot;</span></span></span><br><span class="line"><span class="javascript">    &#125;,</span></span><br><span class="line"><span class="javascript">    <span class="attr">components</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">myComponent</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">props</span>: [<span class="string">&quot;content&quot;</span>],</span></span><br><span class="line"><span class="javascript">        <span class="attr">template</span>: <span class="string">`&lt;div @click=&quot;outData&quot;&gt;&#123;&#123;content&#125;&#125;&lt;/div&gt;`</span>, <span class="comment">//绑定点击事件outData</span></span></span><br><span class="line"><span class="javascript">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">          <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">            <span class="attr">sonData</span>: <span class="string">&quot;I am from son&quot;</span></span></span><br><span class="line"><span class="javascript">          &#125;;</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="javascript">          <span class="function"><span class="title">outData</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">            <span class="built_in">this</span>.$emit(<span class="string">&quot;transfer&quot;</span>, <span class="built_in">this</span>.sonData, <span class="string">&quot;my name is son&quot;</span>); <span class="comment">//将数据传递给父级</span></span></span><br><span class="line"><span class="javascript">          &#125;</span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">      &#125;</span></span><br><span class="line"><span class="javascript">    &#125;,</span></span><br><span class="line"><span class="javascript">    <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="function"><span class="title">getData</span>(<span class="params">sonData</span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">//形参对应传递的数据</span></span></span><br><span class="line"><span class="javascript">        <span class="built_in">this</span>.val = sonData; <span class="comment">//&quot;I am from son&quot;</span></span></span><br><span class="line"><span class="javascript">      &#125;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  &#125;);</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>在子组件中通过自定义事件进行传值，第一个参数为监听事件名，第二参数为传递的数据</li>
<li>在父组件上通过监听事件，通过对应的事件处理程序进行处理，事件处理程序的参数对应接收的数据</li>
</ul>
<h4 id="（3）单向数据流"><a href="#（3）单向数据流" class="headerlink" title="（3）单向数据流"></a>（3）单向数据流</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">my-component</span> <span class="attr">:content</span>=<span class="string">&quot;val&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">my-component</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">my-component</span> <span class="attr">:content</span>=<span class="string">&quot;val&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">my-component</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="keyword">let</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    <span class="attr">el</span>: <span class="string">&quot;#app&quot;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">val</span>: [<span class="number">10</span>, <span class="number">20</span>, <span class="number">30</span>]</span></span><br><span class="line"><span class="javascript">    &#125;,</span></span><br><span class="line"><span class="javascript">    <span class="attr">components</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">myComponent</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">props</span>: [<span class="string">&quot;content&quot;</span>],</span></span><br><span class="line"><span class="javascript">        <span class="comment">//使用克隆后自身的值，组件之间不会相互影响</span></span></span><br><span class="line"><span class="javascript">        <span class="comment">//使用父级传入的引用值，组件之间可能会相互影响</span></span></span><br><span class="line"><span class="javascript">        <span class="attr">template</span>: <span class="string">`&lt;div&gt;&lt;div @click=&quot;changeData&quot;&gt;&#123;&#123;content&#125;&#125;&lt;/div&gt;&lt;h3 @click=&quot;changeSelfData&quot;&gt;&#123;&#123;newContent&#125;&#125;&lt;/h3&gt;&lt;/div&gt;`</span>,</span></span><br><span class="line"><span class="javascript">        <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">          <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">            <span class="attr">newContent</span>: <span class="built_in">this</span>.content.concat([]) <span class="comment">//深度克隆</span></span></span><br><span class="line"><span class="javascript">          &#125;;</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="javascript">          <span class="function"><span class="title">changeData</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">            <span class="built_in">this</span>.content.push(<span class="string">&quot;受到影响&quot;</span>); <span class="comment">//改变父级传入的引用值可能对父级、其它组件造成影响</span></span></span><br><span class="line"><span class="javascript">          &#125;,</span></span><br><span class="line"><span class="javascript">          <span class="function"><span class="title">changeSelfData</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">            <span class="built_in">this</span>.newContent.push(<span class="string">&quot;互不影响&quot;</span>); <span class="comment">//改变自身的值，不会造成父级改变而影响到其它组件</span></span></span><br><span class="line"><span class="javascript">          &#125;</span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">      &#125;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  &#125;);</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。</li>
<li>额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。</li>
</ul>
<h4 id="（4）prop-验证"><a href="#（4）prop-验证" class="headerlink" title="（4）prop 验证"></a>（4）prop 验证</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">my-component</span> <span class="attr">title</span>=<span class="string">&quot;hello&quot;</span> <span class="attr">:content</span>=<span class="string">&quot;val&quot;</span> <span class="attr">:str</span>=<span class="string">&quot;success&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">my-component</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="keyword">let</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    <span class="attr">el</span>: <span class="string">&quot;#app&quot;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">val</span>: [<span class="number">10</span>, <span class="number">20</span>, <span class="number">30</span>]</span></span><br><span class="line"><span class="javascript">    &#125;,</span></span><br><span class="line"><span class="javascript">    <span class="attr">components</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">myComponent</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">props</span>: &#123;</span></span><br><span class="line"><span class="javascript">          <span class="attr">title</span>: <span class="built_in">String</span>, <span class="comment">//Number/Boolean/Array/Object/Date/Function/Symbol</span></span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">          <span class="attr">content</span>: &#123;</span></span><br><span class="line"><span class="javascript">            <span class="attr">type</span>: [<span class="built_in">Array</span>, <span class="built_in">Object</span>], <span class="comment">//[String, Array] 期望类型,可以是多种类型（用数组列表）之一</span></span></span><br><span class="line"><span class="javascript">            <span class="attr">default</span>: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">              <span class="keyword">return</span> [<span class="number">10</span>, <span class="number">20</span>]; <span class="comment">//数组或对象默认值必须用工厂函数获取</span></span></span><br><span class="line"><span class="javascript">            &#125;</span></span><br><span class="line"><span class="javascript">          &#125;,</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">          <span class="attr">str</span>: &#123;</span></span><br><span class="line"><span class="javascript">            <span class="attr">type</span>: <span class="built_in">String</span>,</span></span><br><span class="line"><span class="javascript">            <span class="attr">required</span>: <span class="literal">true</span>, <span class="comment">//是否必须传入</span></span></span><br><span class="line"><span class="javascript">            <span class="attr">viewport</span>: <span class="function"><span class="keyword">function</span>(<span class="params">value</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">              <span class="comment">//自定义验证，返回值true代表通过</span></span></span><br><span class="line"><span class="javascript">              <span class="keyword">return</span> [<span class="string">&quot;success&quot;</span>, <span class="string">&quot;warning&quot;</span>, <span class="string">&quot;danger&quot;</span>].indexOf(value) !== -<span class="number">1</span>;</span></span><br><span class="line"><span class="javascript">            &#125;</span></span><br><span class="line"><span class="javascript">          &#125;</span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">      &#125;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  &#125;);</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。</li>
<li>数组或对象默认值必须用工厂函数获取</li>
<li>类型检测支持：String/Number/Boolean/Array/Object/Date/Function/Symbol</li>
</ul>
<hr>
<h3 id="3-动态组件"><a href="#3-动态组件" class="headerlink" title="3.动态组件"></a>3.动态组件</h3><h4 id="（1）component-is"><a href="#（1）component-is" class="headerlink" title="（1）component:is"></a>（1）component:is</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- &lt;com-one&gt;&lt;/com-one&gt; --&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- &lt;com-two&gt;&lt;/com-two&gt; --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">component</span> <span class="attr">is</span>=<span class="string">&quot;comOne&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">component</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">component</span> <span class="attr">is</span>=<span class="string">&quot;comTwo&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">component</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">component</span> <span class="attr">:is</span>=<span class="string">&quot;type&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">component</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="keyword">let</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    <span class="attr">el</span>: <span class="string">&quot;#app&quot;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">type</span>: <span class="string">&quot;comThree&quot;</span></span></span><br><span class="line"><span class="javascript">    &#125;,</span></span><br><span class="line"><span class="javascript">    <span class="attr">components</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">comOne</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">template</span>: <span class="string">&quot;&lt;h1&gt;hello&lt;/h1&gt;&quot;</span></span></span><br><span class="line"><span class="javascript">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="attr">comTwo</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">template</span>: <span class="string">&quot;&lt;h2&gt;world&lt;/h2&gt;&quot;</span></span></span><br><span class="line"><span class="javascript">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="attr">comTwo</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">template</span>: <span class="string">&quot;&lt;h3&gt;!!!&lt;/h3&gt;&quot;</span></span></span><br><span class="line"><span class="javascript">      &#125;</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  &#125;);</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>出了组件名作为标签来使用组件外，我们还可以使用统一 component 标签，并用 is 属性来绑定使用哪一个组件</li>
<li>我们还可以使用动态绑定 v-bind:is 来动态的切换组件</li>
</ul>
<h4 id="（2）keep-alive"><a href="#（2）keep-alive" class="headerlink" title="（2）keep-alive"></a>（2）keep-alive</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;change&quot;</span>&gt;</span>切换<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">keep-alive</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">component</span> <span class="attr">:is</span>=<span class="string">&quot;type&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">component</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">keep-alive</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">let</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">el</span>: <span class="string">&quot;#app&quot;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">type</span>: <span class="string">&quot;comOne&quot;</span></span></span><br><span class="line"><span class="javascript">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="function"><span class="title">change</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">          <span class="built_in">this</span>.type = <span class="built_in">this</span>.type === <span class="string">&quot;comOne&quot;</span> ? <span class="string">&quot;comTwo&quot;</span> : <span class="string">&quot;comOne&quot;</span>;</span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="attr">components</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">comOne</span>: &#123;</span></span><br><span class="line"><span class="javascript">          <span class="attr">template</span>: <span class="string">&quot;&lt;div&gt;账号：&lt;input type=&#x27;text&#x27;&gt;&lt;/div&gt;&quot;</span>,</span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">        <span class="attr">comTwo</span>: &#123;</span></span><br><span class="line"><span class="javascript">          <span class="attr">template</span>: <span class="string">&quot;&lt;div&gt;密码：&lt;input type=&#x27;password&#x27;&gt;&lt;/div&gt;&quot;</span>,</span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">      &#125;</span></span><br><span class="line"><span class="javascript">    &#125;);</span></span><br><span class="line"><span class="javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。</li>
<li>你每次切换新标签的时候，Vue 都创建了一个新的 currentTabComponent 实例。</li>
<li>重新创建动态组件的行为通常是非常有用的，但有时候，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。</li>
<li>我们可以用一个 &lt;keep-alive&gt; 元素将其动态组件包裹起来。要求被切换到的组件都有自己的名字，不论是通过组件的 name 选项还是局部/全局注册。</li>
</ul>
<hr>
<h3 id="4-插槽"><a href="#4-插槽" class="headerlink" title="4.插槽"></a>4.插槽</h3><h4 id="（1）匿名、具名插槽"><a href="#（1）匿名、具名插槽" class="headerlink" title="（1）匿名、具名插槽"></a>（1）匿名、具名插槽</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">component</span> <span class="attr">is</span>=<span class="string">&quot;com-one&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>2月2日<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">component</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">component</span> <span class="attr">is</span>=<span class="string">&quot;com-two&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">slot</span>=<span class="string">&quot;header&quot;</span>&gt;</span>太阳<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>月亮<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">slot</span>=<span class="string">&quot;footer&quot;</span>&gt;</span>星星<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">component</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="handlebars"><span class="xml"></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">  let vm = new Vue(&#123;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">    el: &quot;#app&quot;,</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">    components: &#123;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">      comOne: &#123;//匿名插槽</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        template: `<span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                    <span class="tag">&lt;<span class="name">span</span>&gt;</span>2020年<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                    <span class="tag">&lt;<span class="name">slot</span>&gt;</span><span class="tag">&lt;/<span class="name">slot</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                  <span class="tag">&lt;/<span class="name">div</span>&gt;</span>`,</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">      &#125;,</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">      comTwo: &#123;//具名插槽（匿名默认是default）</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">        template: `<span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                    <span class="tag">&lt;<span class="name">h1</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                      <span class="tag">&lt;<span class="name">slot</span> <span class="attr">name</span>=<span class="string">&#x27;header&#x27;</span>&gt;</span><span class="tag">&lt;/<span class="name">slot</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                    <span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                    <span class="tag">&lt;<span class="name">h2</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                      <span class="tag">&lt;<span class="name">slot</span> <span class="attr">name</span>=<span class="string">&quot;default&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">slot</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                    <span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                    <span class="tag">&lt;<span class="name">h3</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                      <span class="tag">&lt;<span class="name">slot</span> <span class="attr">name</span>=<span class="string">&quot;footer&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">slot</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                    <span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span></span><br><span class="line"><span class="xml"><span class="handlebars">                  <span class="tag">&lt;/<span class="name">div</span>&gt;</span>`,</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">      &#125;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">    &#125;</span></span></span><br><span class="line"><span class="xml"><span class="handlebars">  &#125;);</span></span></span><br><span class="line"><span class="xml"><span class="handlebars"></span></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="（2）作用域插槽"><a href="#（2）作用域插槽" class="headerlink" title="（2）作用域插槽"></a>（2）作用域插槽</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 父级将数据传递给子级 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">com-one</span> <span class="attr">:list</span>=<span class="string">&quot;list&quot;</span>&gt;</span></span><br><span class="line">      <span class="comment">&lt;!-- 父级声明一个作用域slot-scope, 对应子级作用域 --&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">template</span> <span class="attr">slot-scope</span>=<span class="string">&quot;scope&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">          <span class="comment">&lt;!-- 在这个作用域内可以使用子级绑定的数据 --&gt;</span></span><br><span class="line">          &#123;&#123;scope.item&#125;&#125; - &#123;&#123;scope.index&#125;&#125;</span><br><span class="line">        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">com-one</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">com-one</span> <span class="attr">:list</span>=<span class="string">&quot;list&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">template</span> <span class="attr">slot-scope</span>=<span class="string">&quot;scope&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">          &#123;&#123;scope.index&#125;&#125; - &#123;&#123;scope.item&#125;&#125;</span><br><span class="line">        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">com-one</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">let</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">el</span>: <span class="string">&quot;#app&quot;</span>,</span></span><br><span class="line"><span class="javascript">      <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">list</span>: [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>]</span></span><br><span class="line"><span class="javascript">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="attr">components</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">comOne</span>: &#123;</span></span><br><span class="line"><span class="javascript">          <span class="attr">props</span>: [<span class="string">&quot;list&quot;</span>],<span class="comment">//子级接受数据</span></span></span><br><span class="line"><span class="javascript">          <span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">            <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">              <span class="attr">newList</span>: <span class="built_in">this</span>.list.concat([])<span class="comment">//子级深度克隆数据，并使用克隆后的数据</span></span></span><br><span class="line"><span class="javascript">            &#125;</span></span><br><span class="line"><span class="javascript">          &#125;,</span></span><br><span class="line"><span class="javascript">          <span class="comment">//插槽列表渲染</span></span></span><br><span class="line"><span class="javascript">          <span class="comment">//绑定需要的数据（在slot-scope内）</span></span></span><br><span class="line"><span class="javascript">          <span class="attr">template</span>: <span class="string">`&lt;ul&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">                        &lt;slot </span></span></span><br><span class="line"><span class="string"><span class="javascript">                          v-for=&#x27;(item, index) in newList&#x27; </span></span></span><br><span class="line"><span class="string"><span class="javascript">                          :key=&quot;index&quot;</span></span></span><br><span class="line"><span class="string"><span class="javascript">                          :item=&quot;item&quot;</span></span></span><br><span class="line"><span class="string"><span class="javascript">                          :index=&quot;index&quot;&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">                        &lt;/slot&gt;</span></span></span><br><span class="line"><span class="string"><span class="javascript">                    &lt;/ul&gt;`</span>,</span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">      &#125;</span></span><br><span class="line"><span class="javascript">    &#125;);</span></span><br><span class="line"><span class="javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<hr>
<h2 id="（三）实例"><a href="#（三）实例" class="headerlink" title="（三）实例"></a>（三）实例</h2><h3 id="1-new-Vue"><a href="#1-new-Vue" class="headerlink" title="1.new Vue()"></a>1.new Vue()</h3><h4 id="（1）vm"><a href="#（1）vm" class="headerlink" title="（1）vm"></a>（1）vm</h4><ul>
<li>虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。</li>
</ul>
<h4 id="（2）data"><a href="#（2）data" class="headerlink" title="（2）data"></a>（2）data</h4><ul>
<li>当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。</li>
<li>当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于 data 中的属性才是响应式的。</li>
</ul>
<h4 id="（3）el、-mount-、template、render"><a href="#（3）el、-mount-、template、render" class="headerlink" title="（3）el、$mount()、template、render()"></a>（3）el、$mount()、template、render()</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app1&quot;</span>&gt;</span>&#123;&#123;val&#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app2&quot;</span>&gt;</span>&#123;&#123;val&#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app3&quot;</span>&gt;</span>&#123;&#123;val&#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app4&quot;</span>&gt;</span>&#123;&#123;val&#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="comment">//通过el属性挂载实例</span></span></span><br><span class="line"><span class="javascript">  <span class="keyword">let</span> vm1 = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    <span class="attr">el</span>: <span class="string">&#x27;#app1&#x27;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">val</span>: <span class="string">&quot;app1&quot;</span></span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  &#125;);</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="comment">//通过实例方法$Mount()挂载实例</span></span></span><br><span class="line"><span class="javascript">  <span class="keyword">let</span> vm2 = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">val</span>: <span class="string">&quot;app2&quot;</span></span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  &#125;)</span></span><br><span class="line"><span class="javascript">  vm2.$mount(<span class="string">&quot;#app2&quot;</span>)</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="comment">//template会替换掉div#app3</span></span></span><br><span class="line"><span class="javascript">  <span class="comment">//template优于el和$mount()的outHtml()</span></span></span><br><span class="line"><span class="javascript">  <span class="keyword">let</span> vm3 = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    <span class="attr">el</span>: <span class="string">&#x27;#app3&#x27;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">val</span>: <span class="string">&quot;app3&quot;</span></span></span><br><span class="line"><span class="javascript">    &#125;,</span></span><br><span class="line"><span class="javascript">    <span class="attr">template</span>: <span class="string">&quot;&lt;h1&gt;&#123;&#123;val&#125;&#125;&lt;/h1&gt;&quot;</span></span></span><br><span class="line"><span class="javascript">  &#125;)</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="comment">//render优于template</span></span></span><br><span class="line"><span class="javascript">  <span class="keyword">let</span> vm4 = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">    <span class="attr">el</span>: <span class="string">&#x27;#app4&#x27;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="attr">data</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="attr">val</span>: <span class="string">&quot;app4&quot;</span></span></span><br><span class="line"><span class="javascript">    &#125;,</span></span><br><span class="line"><span class="javascript">    <span class="attr">template</span>: <span class="string">&quot;&lt;h1&gt;&#123;&#123;val&#125;&#125;&lt;/h1&gt;&quot;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="function"><span class="title">render</span>(<span class="params">h</span>)</span>&#123;<span class="comment">// h函数用于创建VNode</span></span></span><br><span class="line"><span class="javascript">      <span class="keyword">return</span> h(<span class="string">&quot;p&quot;</span>,&#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">//行间样式</span></span></span><br><span class="line"><span class="javascript">        <span class="attr">style</span>: &#123;</span></span><br><span class="line"><span class="javascript">          <span class="attr">color</span>: <span class="string">&quot;red&quot;</span></span></span><br><span class="line"><span class="javascript">        &#125;,</span></span><br><span class="line"><span class="javascript">        <span class="comment">//类名</span></span></span><br><span class="line"><span class="javascript">        <span class="attr">class</span>: [<span class="string">&#x27;bg&#x27;</span>],</span></span><br><span class="line"><span class="javascript">        <span class="comment">//Dom属性</span></span></span><br><span class="line"><span class="javascript">        <span class="attr">domProps</span>: &#123;</span></span><br><span class="line"><span class="javascript">          <span class="comment">// innerHTML: &quot;app&quot;//优于第三个参数</span></span></span><br><span class="line"><span class="javascript">        &#125;</span></span><br><span class="line"><span class="javascript">      &#125;,[h(<span class="string">&quot;h3&quot;</span>),h(<span class="string">&quot;h4&quot;</span>)]);</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  &#125;)</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li>el、$mount()都是挂载实例</li>
<li>template时一个html字符串，会替换掉挂载的Dom,如果没有则使用挂载Dom的outHtml()</li>
<li>render()是产生虚拟Dom的函数，所返回的虚拟Dom会决定视图的内容</li>
</ul>
<h3 id="2-生命周期"><a href="#2-生命周期" class="headerlink" title="2.生命周期"></a>2.生命周期</h3><ul>
<li>生命周期钩子<img src="./lifecycle.png"></li>
</ul>
<hr>
<h2 id="（四）Vue-Cli"><a href="#（四）Vue-Cli" class="headerlink" title="（四）Vue-Cli"></a>（四）Vue-Cli</h2><h3 id="1-安装"><a href="#1-安装" class="headerlink" title="1.安装"></a>1.安装</h3><h4 id="（1）npm安装"><a href="#（1）npm安装" class="headerlink" title="（1）npm安装"></a>（1）npm安装</h4><blockquote>
<p>npm install -g @vue/cli<br>vue –version </p>
</blockquote>
<h4 id="（2）创建项目-cmd指令"><a href="#（2）创建项目-cmd指令" class="headerlink" title="（2）创建项目-cmd指令"></a>（2）创建项目-cmd指令</h4><blockquote>
<p>vue create vue-app</p>
</blockquote>
<ul>
<li><p><font color=red>解决git中上下按键选择无效问题？</font></p>
<ul>
<li>选择git bash 的安装目录，找到etc/bash.bashrc文件</li>
<li>文件末未添加 ：alias vue=’winpty vue.cmd’</li>
<li>重启git bash 即可</li>
</ul>
</li>
<li><p>清除预设</p>
<blockquote>
<p>C:/user/lhf/.vuerc</p>
</blockquote>
</li>
</ul>
<h4 id="（3）创建项目-UI"><a href="#（3）创建项目-UI" class="headerlink" title="（3）创建项目-UI"></a>（3）创建项目-UI</h4><blockquote>
<p>vue ui</p>
</blockquote>
<ul>
<li>回到创建页<blockquote>
<p>C:/user/lhf/vue-cli-ui/db.json</p>
</blockquote>
</li>
</ul>
<h4 id="（3）运行项目"><a href="#（3）运行项目" class="headerlink" title="（3）运行项目"></a>（3）运行项目</h4><ul>
<li><p>运行index.html</p>
<blockquote>
<p>npm run serve</p>
</blockquote>
</li>
<li><p>运行指定vue文件</p>
<blockquote>
<p>npm install -g @vue/cli-service-global<br>vue run serve helloworld</p>
</blockquote>
</li>
</ul>
<hr>
<h3 id="2-路由router"><a href="#2-路由router" class="headerlink" title="2.路由router"></a>2.路由router</h3><h4 id="（1）安装"><a href="#（1）安装" class="headerlink" title="（1）安装"></a>（1）安装</h4><blockquote>
<p>npm install vue-router –save<br>vue add router –save</p>
</blockquote>
<h4 id="（2）使用"><a href="#（2）使用" class="headerlink" title="（2）使用"></a>（2）使用</h4><ul>
<li>router.js<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> VueRouter <span class="keyword">from</span> <span class="string">&#x27;vue-router&#x27;</span></span><br><span class="line"><span class="keyword">import</span> Home <span class="keyword">from</span> <span class="string">&#x27;../views/Home.vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> About <span class="keyword">from</span> <span class="string">&#x27;../views/About.vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> Learn <span class="keyword">from</span> <span class="string">&#x27;../views/Learn.vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> Student <span class="keyword">from</span> <span class="string">&#x27;../views/Student.vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> Community <span class="keyword">from</span> <span class="string">&#x27;../views/Community.vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> Question <span class="keyword">from</span> <span class="string">&#x27;../components/community/question&#x27;</span></span><br><span class="line"><span class="keyword">import</span> Forum <span class="keyword">from</span> <span class="string">&#x27;../components/community/forum&#x27;</span></span><br><span class="line"><span class="keyword">import</span> Help <span class="keyword">from</span> <span class="string">&#x27;../components/community/help&#x27;</span></span><br><span class="line"><span class="keyword">import</span> Answer <span class="keyword">from</span> <span class="string">&#x27;../components/Answer&#x27;</span></span><br><span class="line"><span class="keyword">import</span> Error404 <span class="keyword">from</span> <span class="string">&#x27;../components/Error&#x27;</span></span><br><span class="line"></span><br><span class="line">Vue.use(VueRouter)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> routes = [</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="attr">path</span>: <span class="string">&#x27;/home&#x27;</span>,</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;home&#x27;</span>,</span><br><span class="line">    <span class="attr">alias</span>: <span class="string">&quot;/&quot;</span>, <span class="comment">//别名, 影响active</span></span><br><span class="line">    <span class="attr">components</span>: &#123;<span class="comment">//router-view复用</span></span><br><span class="line">      <span class="attr">default</span>: Home,</span><br><span class="line">      <span class="string">&quot;list&quot;</span>: Question</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="attr">path</span>: <span class="string">&#x27;/about&#x27;</span>,<span class="comment">//对用router-link to=path</span></span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;about&#x27;</span>,<span class="comment">//对用router-link :to=&#123;name: name&#125;</span></span><br><span class="line">    <span class="attr">component</span>: About</span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="attr">path</span>: <span class="string">&#x27;/community&#x27;</span>,</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;community&#x27;</span>,</span><br><span class="line">    <span class="attr">component</span>: Community,</span><br><span class="line">    <span class="attr">redirect</span>: <span class="string">&quot;/community/question&quot;</span>,<span class="comment">//路由重定向</span></span><br><span class="line">    <span class="attr">meta</span>: &#123;<span class="comment">//原信息，子组件实例的$route.matched[0].meta可以访问到，在访问不到实例之前，to上面也可以访问</span></span><br><span class="line">      <span class="attr">login</span>: <span class="literal">false</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">children</span>: [<span class="comment">//嵌套路由</span></span><br><span class="line">      &#123;</span><br><span class="line">        <span class="comment">// path: &#x27;/community/question&#x27;,//绝对路径</span></span><br><span class="line">        <span class="attr">path</span>: <span class="string">&#x27;question&#x27;</span>,<span class="comment">//相对路径简写形式，不能出现/</span></span><br><span class="line">        <span class="attr">name</span>: <span class="string">&quot;question&quot;</span>,</span><br><span class="line">        <span class="attr">component</span>: Question</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">path</span>: <span class="string">&#x27;forum&#x27;</span>,</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&quot;forum&quot;</span>,</span><br><span class="line">        <span class="attr">component</span>: Forum</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">path</span>: <span class="string">&#x27;help&#x27;</span>,</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&quot;help&quot;</span>,</span><br><span class="line">        <span class="attr">component</span>: Help</span><br><span class="line">      &#125;,</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="attr">path</span>: <span class="string">&quot;/answer/:id&quot;</span>,<span class="comment">//动态路由</span></span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;answer&quot;</span>,</span><br><span class="line">    <span class="attr">component</span>: Answer</span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="attr">path</span>: <span class="string">&quot;/404&quot;</span>,<span class="comment">//404</span></span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;error&quot;</span>,</span><br><span class="line">    <span class="attr">component</span>: Error404</span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="attr">path</span>: <span class="string">&#x27;*&#x27;</span>,<span class="comment">//未匹配重定向</span></span><br><span class="line">    <span class="function"><span class="title">redirect</span>(<span class="params">to</span>)</span>&#123;</span><br><span class="line">      <span class="keyword">if</span>(to.path === <span class="string">&quot;/&quot;</span>)&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">&#x27;/home&#x27;</span></span><br><span class="line">      &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">          <span class="attr">name</span>: <span class="string">&quot;error&quot;</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">]</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> VueRouter(&#123;</span><br><span class="line">  <span class="attr">linkActiveClass</span>: <span class="string">&quot;active&quot;</span>,<span class="comment">//重命名</span></span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&#x27;history&#x27;</span>,</span><br><span class="line">  <span class="attr">base</span>: process.env.BASE_URL,</span><br><span class="line">  routes</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> router</span><br><span class="line"></span><br></pre></td></tr></table></figure></li>
<li>component.vue</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ul</span> <span class="attr">id</span>=<span class="string">&quot;nav&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">tag</span>=<span class="string">&quot;li&quot;</span> <span class="attr">to</span>=<span class="string">&quot;/&quot;</span>&gt;</span>Home<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span> |</span><br><span class="line">      <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">tag</span>=<span class="string">&quot;li&quot;</span> <span class="attr">to</span>=<span class="string">&quot;/about&quot;</span>&gt;</span>About<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">router-view</span>/&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 动态绑定 --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 动态路由 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">:to</span>=<span class="string">&quot;&#123;name: &#x27;myHome&#x27;, params: &#123;id: item.id&#125;&#125;&quot;</span>&gt;</span>myHome<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">:to</span>=<span class="string">&quot;&#123;name: about&#125;&quot;</span>&gt;</span>myAbout<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">router-view</span>/&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">    <span class="function"><span class="title">create</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">      <span class="built_in">this</span>.$route.params.id<span class="comment">//动态路由传值接收</span></span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">  &#125;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li>路由: vue-router</li>
<li>路由嵌套: children[]</li>
<li>动态路由: ‘/path/:id’ :to=”{name: path, params:{id: item.id}}” create(){this.$route.params.id}</li>
<li>路由重定向: redirect: ‘/newPath’</li>
<li>路由别名：alias</li>
<li>路由Class: LinkActiveClass</li>
<li>router-link应用: tag=”li”</li>
<li>router-view复用: components[]</li>
<li>原信息：meta</li>
</ul>
<hr>
<h4 id="（3）导航守卫"><a href="#（3）导航守卫" class="headerlink" title="（3）导航守卫"></a>（3）导航守卫</h4><ul>
<li>全局守卫</li>
<li>Router实例方法：beforeEach(function(to, from, next){})<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> VueRouter(&#123;</span><br><span class="line">  <span class="attr">linkActiveClass</span>: <span class="string">&quot;active&quot;</span>,<span class="comment">//重命名</span></span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&#x27;history&#x27;</span>,</span><br><span class="line">  <span class="attr">base</span>: process.env.BASE_URL,</span><br><span class="line">  routes</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">//导航守卫 全局守卫</span></span><br><span class="line"><span class="comment">// to: 去哪里</span></span><br><span class="line"><span class="comment">// from: 从哪来</span></span><br><span class="line"><span class="comment">// next(param)</span></span><br><span class="line"><span class="comment">//             param === false 不许进，从哪来回哪去</span></span><br><span class="line"><span class="comment">//             param === path 去指定地方</span></span><br><span class="line"><span class="comment">//             空 允许进</span></span><br><span class="line">router.beforeEach(<span class="function"><span class="keyword">function</span>(<span class="params">to, <span class="keyword">from</span>, next</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(to.path === <span class="string">&quot;/community/question&quot;</span>)&#123;</span><br><span class="line">    <span class="keyword">let</span> result = confirm(<span class="string">&quot;你还没有登录，要前往登录吗？&quot;</span>);</span><br><span class="line">    <span class="keyword">if</span>(result)&#123;</span><br><span class="line">      next(&#123;<span class="attr">name</span>: <span class="string">&#x27;user&#x27;</span>&#125;);</span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">      next(<span class="literal">false</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">    next()</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></li>
<li>路由独享守卫-路由（仅仅可以守卫该路径下的组件）</li>
<li>routes内属性方法：beforeEnter(to, from, next){}<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="attr">path</span>: <span class="string">&#x27;/community&#x27;</span>,</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;community&#x27;</span>,</span><br><span class="line">    <span class="attr">component</span>: Community,</span><br><span class="line">    <span class="attr">redirect</span>: <span class="string">&quot;/community/question&quot;</span>,<span class="comment">//重定向</span></span><br><span class="line">    <span class="attr">children</span>: [</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="comment">// path: &#x27;/community/question&#x27;,</span></span><br><span class="line">        <span class="attr">path</span>: <span class="string">&#x27;question&#x27;</span>,</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&quot;question&quot;</span>,</span><br><span class="line">        <span class="attr">component</span>: Question,</span><br><span class="line">        <span class="function"><span class="title">beforeEnter</span>(<span class="params">to, <span class="keyword">from</span>, next</span>)</span>&#123;</span><br><span class="line">          <span class="keyword">let</span> result = confirm(<span class="string">&quot;你还没有登录，要前往登录吗？&quot;</span>);</span><br><span class="line">          <span class="keyword">if</span>(result)&#123;</span><br><span class="line">            next(&#123;<span class="attr">name</span>: <span class="string">&#x27;user&#x27;</span>&#125;);</span><br><span class="line">          &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">            next(<span class="literal">false</span>)</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">path</span>: <span class="string">&#x27;forum&#x27;</span>,</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&quot;forum&quot;</span>,</span><br><span class="line">        <span class="attr">component</span>: Forum</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">path</span>: <span class="string">&#x27;help&#x27;</span>,</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&quot;help&quot;</span>,</span><br><span class="line">        <span class="attr">component</span>: Help</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        <span class="attr">path</span>: <span class="string">&#x27;user&#x27;</span>,</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&quot;user&quot;</span>,</span><br><span class="line">        <span class="attr">component</span>: User</span><br><span class="line">      &#125;,</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br></pre></td></tr></table></figure></li>
<li>组件内守卫-组件（可守卫所有该组件出现的地方）</li>
<li>组件属性方法：beforeRouteEnter(to, from, next)<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">    <span class="function"><span class="title">beforeRouteEnter</span>(<span class="params">to, <span class="keyword">from</span>, next</span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">      <span class="keyword">if</span>(to.matched[<span class="number">0</span>].meta.login)&#123;</span></span><br><span class="line"><span class="javascript">        next();</span></span><br><span class="line"><span class="javascript">        <span class="keyword">return</span>;</span></span><br><span class="line"><span class="javascript">      &#125;</span></span><br><span class="line"><span class="javascript">      <span class="keyword">let</span> result = confirm(<span class="string">&quot;你还没有登录，要前往登录吗？&quot;</span>);</span></span><br><span class="line"><span class="javascript">      <span class="keyword">if</span> (result) &#123;</span></span><br><span class="line"><span class="javascript">        next(&#123;</span></span><br><span class="line"><span class="javascript">          <span class="attr">name</span>: <span class="string">&#x27;user&#x27;</span></span></span><br><span class="line"><span class="javascript">        &#125;);</span></span><br><span class="line"><span class="javascript">      &#125; <span class="keyword">else</span> &#123;</span></span><br><span class="line"><span class="javascript">        next(<span class="literal">false</span>)</span></span><br><span class="line"><span class="javascript">      &#125;</span></span><br><span class="line"><span class="javascript">    &#125;,</span></span><br><span class="line"><span class="javascript">    <span class="function"><span class="title">beforeRouteLeave</span>(<span class="params">to, <span class="keyword">from</span>, next</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">      <span class="keyword">let</span> result = confirm(<span class="string">&quot;确定要离开吗？&quot;</span>);</span></span><br><span class="line"><span class="javascript">      <span class="keyword">if</span>(result)&#123;</span></span><br><span class="line"><span class="javascript">        next()</span></span><br><span class="line"><span class="javascript">      &#125;<span class="keyword">else</span>&#123;</span></span><br><span class="line"><span class="javascript">        next(<span class="literal">false</span>)</span></span><br><span class="line"><span class="javascript">      &#125;</span></span><br><span class="line"><span class="javascript">    &#125;,</span></span><br><span class="line"><span class="javascript">    <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">      <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">questions</span>: [&#123;</span></span><br><span class="line"><span class="javascript">            <span class="attr">id</span>: <span class="number">202001</span>,</span></span><br><span class="line"><span class="javascript">            <span class="attr">question</span>: <span class="string">&quot;月亮太阳看起来为什么一样大?&quot;</span>,</span></span><br><span class="line"><span class="javascript">            <span class="attr">answer</span>: <span class="string">&quot;从地球上望月球，它看上去与太阳的大小差不多，造成这种错觉是距离奇怪的安排.&quot;</span></span></span><br><span class="line"><span class="javascript">          &#125;,</span></span><br><span class="line"><span class="javascript">          &#123;</span></span><br><span class="line"><span class="javascript">            <span class="attr">id</span>: <span class="number">202002</span>,</span></span><br><span class="line"><span class="javascript">            <span class="attr">question</span>: <span class="string">&quot;墨为什么不褪色?&quot;</span>,</span></span><br><span class="line"><span class="javascript">            <span class="attr">answer</span>: <span class="string">&quot;因为墨是煤的一家。墨是用煤烟制成的。煤是永远也洗不白的，因此，墨写的字、画的画是不褪色的.&quot;</span></span></span><br><span class="line"><span class="javascript">          &#125;,</span></span><br><span class="line"><span class="javascript">          &#123;</span></span><br><span class="line"><span class="javascript">            <span class="attr">id</span>: <span class="number">202003</span>,</span></span><br><span class="line"><span class="javascript">            <span class="attr">question</span>: <span class="string">&quot;为什么海洋是蓝色的？?&quot;</span>,</span></span><br><span class="line"><span class="javascript">            <span class="attr">answer</span>: <span class="string">&quot;大海看起来是那么蓝，那么美。可实际上，海水也是无色透明的.&quot;</span></span></span><br><span class="line"><span class="javascript">          &#125;,</span></span><br><span class="line"><span class="javascript">        ]</span></span><br><span class="line"><span class="javascript">      &#125;;</span></span><br><span class="line"><span class="javascript">    &#125;,</span></span><br><span class="line"><span class="javascript">  &#125;;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
</ul>
<hr>
<h4 id="（4）懒加载"><a href="#（4）懒加载" class="headerlink" title="（4）懒加载"></a>（4）懒加载</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> VueRouter <span class="keyword">from</span> <span class="string">&#x27;vue-router&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// import Home from &#x27;../views/Home.vue&#x27;</span></span><br><span class="line"><span class="comment">// import About from &#x27;../views/About.vue&#x27;</span></span><br><span class="line"><span class="comment">// import Learn from &#x27;../views/Learn.vue&#x27;</span></span><br><span class="line"><span class="comment">// import Student from &#x27;../views/Student.vue&#x27;</span></span><br><span class="line"><span class="comment">// import Community from &#x27;../views/Community.vue&#x27;</span></span><br><span class="line"><span class="comment">// import Question from &#x27;../components/community/question&#x27;</span></span><br><span class="line"><span class="comment">// import Forum from &#x27;../components/community/forum&#x27;</span></span><br><span class="line"><span class="comment">// import Help from &#x27;../components/community/help&#x27;</span></span><br><span class="line"><span class="comment">// import Answer from &#x27;../components/Answer&#x27;</span></span><br><span class="line"><span class="comment">// import Error404 from &#x27;../components/Error&#x27;</span></span><br><span class="line"><span class="comment">// import User from &#x27;../components/community/user&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> Home = <span class="function">() =&gt;</span> <span class="keyword">import</span>( <span class="string">&#x27;../views/Home.vue&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> About = <span class="function">() =&gt;</span> <span class="keyword">import</span>( <span class="string">&#x27;../views/About.vue&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> Learn = <span class="function">() =&gt;</span> <span class="keyword">import</span>( <span class="string">&#x27;../views/Learn.vue&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> Student = <span class="function">() =&gt;</span> <span class="keyword">import</span>( <span class="string">&#x27;../views/Student.vue&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> Community = <span class="function">() =&gt;</span> <span class="keyword">import</span>( <span class="string">&#x27;../views/Community.vue&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> Question = <span class="function">() =&gt;</span> <span class="keyword">import</span>( <span class="string">&#x27;../components/community/question&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> Forum = <span class="function">() =&gt;</span> <span class="keyword">import</span>( <span class="string">&#x27;../components/community/forum&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> Help = <span class="function">() =&gt;</span> <span class="keyword">import</span>( <span class="string">&#x27;../components/community/help&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> Answer = <span class="function">() =&gt;</span> <span class="keyword">import</span>( <span class="string">&#x27;../components/Answer&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> Error404 = <span class="function">() =&gt;</span> <span class="keyword">import</span>( <span class="string">&#x27;../components/Error&#x27;</span>);</span><br><span class="line"><span class="keyword">const</span> User = <span class="function">() =&gt;</span> <span class="keyword">import</span>( <span class="string">&#x27;../components/community/user&#x27;</span>);</span><br></pre></td></tr></table></figure>
<hr>
<h3 id="3-状态vuex"><a href="#3-状态vuex" class="headerlink" title="3.状态vuex"></a>3.状态vuex</h3><h4 id="（1）非父子组件传值"><a href="#（1）非父子组件传值" class="headerlink" title="（1）非父子组件传值"></a>（1）非父子组件传值</h4><ul>
<li>依赖共同祖先组件传值<ul>
<li>两个组件的关系太远，嵌套太深，数据太多不适用</li>
<li>一个组件给多个组件传值，关系复杂不适用</li>
</ul>
</li>
</ul>
<ul>
<li>事件总线<ul>
<li>利用Vue的prototype公共属性进行事件绑定与监听</li>
<li>需要依赖于事件</li>
</ul>
</li>
</ul>
<h4 id="（2）vuex-Store"><a href="#（2）vuex-Store" class="headerlink" title="（2）vuex.Store"></a>（2）vuex.Store</h4><ul>
<li>$store.state</li>
<li>$store.getters</li>
<li>mapState</li>
<li>mapGetters</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> Vuex <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br><span class="line"></span><br><span class="line">Vue.use(Vuex)</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> Vuex.Store(&#123;</span><br><span class="line">  <span class="attr">state</span>: &#123;<span class="comment">//公共数据池</span></span><br><span class="line">    <span class="attr">studentList</span>: []</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">getters</span>: &#123;</span><br><span class="line">    <span class="function"><span class="title">list</span>(<span class="params">state, getters</span>)</span>&#123;<span class="comment">//数据池、自身</span></span><br><span class="line">      <span class="keyword">return</span> state.studentList.map(<span class="function">(<span class="params">item, index</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">if</span>(index &lt; <span class="number">3</span>)&#123;</span><br><span class="line">          <span class="keyword">return</span> getters.prefix + item;</span><br><span class="line">        &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">          <span class="keyword">return</span> item + getters.suffix;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;)</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="function"><span class="title">prefix</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="string">&quot;#_&quot;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="function"><span class="title">suffix</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="string">&quot;-$&quot;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">mutations</span>: &#123;<span class="comment">//同步处理</span></span><br><span class="line">    <span class="function"><span class="title">changeStudentList</span>(<span class="params">state, val</span>)</span>&#123;</span><br><span class="line">      state.studentList.push(val)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">actions</span>: &#123;<span class="comment">//异步处理</span></span><br><span class="line">    <span class="function"><span class="title">change</span>(<span class="params">ctx, val</span>)</span>&#123;</span><br><span class="line">      <span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">        ctx.commit(<span class="string">&quot;changeStudentList&quot;</span>, val)</span><br><span class="line">      &#125;, <span class="number">1000</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">modules</span>: &#123;<span class="comment">//模块，将每一组页面下的数据单独抽离成一个模块，便于维护</span></span><br><span class="line">    <span class="attr">student</span>: &#123;</span><br><span class="line">      <span class="attr">namespaced</span>: <span class="literal">true</span>,<span class="comment">//命名空间</span></span><br><span class="line">      state,</span><br><span class="line">      getters,</span><br><span class="line">      ...</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">product</span>: &#123;</span><br><span class="line">      ...</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- &lt;div&gt;</span></span><br><span class="line"><span class="comment">      &lt;p v-if=&quot;list.length !== 0&quot;&gt;学员列表：&lt;/p&gt;</span></span><br><span class="line"><span class="comment">      &lt;ul&gt;</span></span><br><span class="line"><span class="comment">        &lt;li v-for=&quot;(item, index) in list&quot; :key=&quot;item+index&quot;&gt;&#123;&#123;index+1&#125;&#125;.&#123;&#123;item&#125;&#125;&lt;/li&gt;</span></span><br><span class="line"><span class="comment">      &lt;/ul&gt;</span></span><br><span class="line"><span class="comment">    &lt;/div&gt; --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-if</span>=<span class="string">&quot;list.length !== 0&quot;</span>&gt;</span>学员列表：<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;(item, index) in list&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;item+index&quot;</span>&gt;</span>&#123;&#123;index+1&#125;&#125;.&#123;&#123;item&#125;&#125;<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">&quot;new&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">&quot;(item, index) in newList&quot;</span> <span class="attr">:key</span>=<span class="string">&quot;item+index&quot;</span>&gt;</span>&#123;&#123;index+1&#125;&#125;.&#123;&#123;item&#125;&#125;<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="keyword">import</span> &#123;mapState, mapGetters&#125; <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span>;</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">   <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">       <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">           <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">            <span class="comment">// studentList: this.$store.state.studentList</span></span></span><br><span class="line"><span class="javascript">           &#125;;</span></span><br><span class="line"><span class="javascript">       &#125;,</span></span><br><span class="line"><span class="javascript">       <span class="attr">computed</span>: &#123;</span></span><br><span class="line"><span class="javascript">        ...mapState(&#123;<span class="comment">//重命名</span></span></span><br><span class="line"><span class="javascript">          <span class="attr">list</span>: <span class="function"><span class="params">state</span> =&gt;</span> state.studentList</span></span><br><span class="line"><span class="javascript">        &#125;),</span></span><br><span class="line"><span class="javascript">        ...mapState(<span class="string">&quot;modelName&quot;</span>, [<span class="string">&#x27;studentList&#x27;</span>])<span class="comment">//使用模块需要添加对应模块名</span></span></span><br><span class="line"><span class="javascript">        ...mapGetters(&#123;<span class="comment">//重命名</span></span></span><br><span class="line"><span class="javascript">          <span class="attr">newList</span>: <span class="string">&#x27;list&#x27;</span></span></span><br><span class="line"><span class="javascript">        &#125;)</span></span><br><span class="line"><span class="javascript">       &#125;,</span></span><br><span class="line"><span class="javascript">       <span class="function"><span class="title">created</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">//  this.bus.$on(&quot;new-student&quot;, list =&gt; &#123;</span></span></span><br><span class="line"><span class="javascript">        <span class="comment">//    this.studentList = list;</span></span></span><br><span class="line"><span class="javascript">        <span class="comment">//  &#125;)</span></span></span><br><span class="line"><span class="javascript">       &#125;</span></span><br><span class="line"><span class="javascript">   &#125;;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">span</span>&gt;</span>添加学员：<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;studentName&quot;</span>&gt;</span></span><br><span class="line">      <span class="comment">&lt;!-- &lt;button @click=&quot;addStudent&quot;&gt;添加&lt;/button&gt; --&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;[change(studentName), reset()]&quot;</span>&gt;</span>添加<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="keyword">import</span> &#123;mapActions&#125; <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span>;<span class="comment">//简洁操作</span></span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">   <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">       <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span></span><br><span class="line"><span class="javascript">           <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">            <span class="attr">studentName</span>: <span class="string">&quot;&quot;</span>,</span></span><br><span class="line"><span class="javascript">            <span class="comment">// studentList:[]</span></span></span><br><span class="line"><span class="javascript">           &#125;;</span></span><br><span class="line"><span class="javascript">       &#125;,</span></span><br><span class="line"><span class="javascript">       <span class="attr">methods</span>: &#123;</span></span><br><span class="line"><span class="javascript">         ...mapActions([<span class="string">&#x27;change&#x27;</span>]),</span></span><br><span class="line"><span class="javascript">         <span class="function"><span class="title">addStudent</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">          <span class="built_in">this</span>.studentList.push(<span class="built_in">this</span>.studentName);</span></span><br><span class="line"><span class="javascript">          <span class="built_in">this</span>.bus.$emit(<span class="string">&quot;new-student&quot;</span>, <span class="built_in">this</span>.studentList);</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">          <span class="built_in">this</span>.$store.state.studentList.push(<span class="built_in">this</span>.studentName);<span class="comment">//手动触发，不适用严格模式</span></span></span><br><span class="line"><span class="javascript">          <span class="built_in">this</span>.$store.commit(<span class="string">&quot;changeStudentList&quot;</span>, <span class="built_in">this</span>.studentName);<span class="comment">//同步更改</span></span></span><br><span class="line"><span class="javascript">          <span class="built_in">this</span>.$store.commit(<span class="string">&quot;modelName/changeStudentList&quot;</span>, <span class="built_in">this</span>.studentName);<span class="comment">//同步更改(使用模块)</span></span></span><br><span class="line"><span class="javascript">          <span class="built_in">this</span>.$store.dispatch(<span class="string">&quot;change&quot;</span>, <span class="built_in">this</span>.studentName)<span class="comment">//异步更改</span></span></span><br><span class="line"><span class="javascript">          </span></span><br><span class="line"><span class="javascript">         &#125;,</span></span><br><span class="line"><span class="javascript">         <span class="function"><span class="title">reset</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">          <span class="built_in">this</span>.studentName = <span class="string">&quot;&quot;</span>;</span></span><br><span class="line"><span class="javascript">         &#125;</span></span><br><span class="line"><span class="javascript">       &#125;</span></span><br><span class="line"><span class="javascript">   &#125;;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
      
      <!-- 打赏 -->
      
        <div id="reward-btn">
          打赏
        </div>
        
    </div>
    <footer class="article-footer">
      <a data-url="https://gitee.com/huafu123/blog/2018/08/01/VUEa/" data-id="ckya9fc19000tygf697f2bows"
        class="article-share-link">分享</a>
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/blog/tags/js-vue/" rel="tag">js vue</a></li></ul>

    </footer>

  </div>

  
  
  <nav class="article-nav">
    
      <a href="/blog/2018/08/01/MOCK/" class="article-nav-link">
        <strong class="article-nav-caption">上一篇</strong>
        <div class="article-nav-title">
          
            MockJs 初识
          
        </div>
      </a>
    
    
      <a href="/blog/2018/07/21/GULPa/" class="article-nav-link">
        <strong class="article-nav-caption">下一篇</strong>
        <div class="article-nav-title">Gulp 初识</div>
      </a>
    
  </nav>


  

  
  
<!-- valine评论 -->
<div id="vcomments-box">
    <div id="vcomments">
    </div>
</div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='https://cdn.jsdelivr.net/npm/valine@1.3.10/dist/Valine.min.js'></script>
<script>
    new Valine({
        el: '#vcomments',
        notify: false,
        verify: false,
        app_id: '',
        app_key: '',
        path: window.location.pathname,
        avatar: 'mp',
        placeholder: '给我的文章加点评论吧~',
        recordIP: true
    });
    const infoEle = document.querySelector('#vcomments .info');
    if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0) {
        infoEle.childNodes.forEach(function (item) {
            item.parentNode.removeChild(item);
        });
    }
</script>
<style>
    #vcomments-box {
        padding: 5px 30px;
    }

    @media screen and (max-width: 800px) {
        #vcomments-box {
            padding: 5px 0px;
        }
    }

    #vcomments-box #vcomments {
        background-color: #fff;
    }

    .v .vlist .vcard .vh {
        padding-right: 20px;
    }

    .v .vlist .vcard {
        padding-left: 10px;
    }
</style>

  

  
  
  

</article>
</section>
      <footer class="footer">
  <div class="outer">
    <ul class="list-inline">
      <li>
        &copy;
        2020-2022
        Huafu Li
      </li>
      <li>
        
          Powered by
        
        
        <a href="https://hexo.io" target="_blank">Hexo</a> Theme <a href="https://github.com/Shen-Yu/hexo-theme-ayer" target="_blank">Ayer</a>
        
      </li>
    </ul>
    <ul class="list-inline">
      <li>
        
        
        <ul class="list-inline">
  <li>PV:<span id="busuanzi_value_page_pv"></span></li>
  <li>UV:<span id="busuanzi_value_site_uv"></span></li>
</ul>
        
      </li>
      <li>
        <!-- cnzz统计 -->
        
        <script type="text/javascript" src='https://s9.cnzz.com/z_stat.php?id=1278069914&amp;web_id=1278069914'></script>
        
      </li>
    </ul>
  </div>
</footer>
    <div class="to_top">
        <div class="totop" id="totop">
  <i class="ri-arrow-up-line"></i>
</div>
      </div>
    </main>
    
    <aside class="sidebar">
      
        <button class="navbar-toggle"></button>
<nav class="navbar">
  
  <div class="logo">
    <a href="/blog/"><img src="/blog/hu.png" alt="虎虎生辉"></a>
  </div>
  
  <ul class="nav nav-main">
    
    <li class="nav-item">
      <a class="nav-item-link" href="/blog/">主页</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/blog/archives">目录</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/blog/about">关于</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/blog/pictures">相册</a>
    </li>
    
  </ul>
</nav>
<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      
      <a class="nav-item-link nav-item-search"  title="Search">
        <i class="ri-search-line"></i>
      </a>
      
      
      <a class="nav-item-link" target="_blank" href="/blog/atom.xml" title="RSS Feed">
        <i class="ri-rss-line"></i>
      </a>
      
    </li>
  </ul>
</nav>
<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="Search...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
      </aside>
      <div id="mask"></div>

<!-- #reward -->
<div id="reward">
  <span class="close"><i class="ri-close-line"></i></span>
  <p class="reward-p"><i class="ri-cup-line"></i>请我喝杯咖啡吧~</p>
  <div class="reward-box">
    
    <div class="reward-item">
      <img class="reward-img" src="/blog/./images/alipay.png">
      <span class="reward-type">支付宝</span>
    </div>
    
    
    <div class="reward-item">
      <img class="reward-img" src="/blog/./images/wechat.png">
      <span class="reward-type">微信</span>
    </div>
    
  </div>
</div>
      
<script src="/blog/js/jquery-2.0.3.min.js"></script>


<script src="/blog/js/jquery.justifiedGallery.min.js"></script>


<script src="/blog/js/lazyload.min.js"></script>


<script src="/blog/js/busuanzi-2.3.pure.min.js"></script>


  
<script src="/blog/fancybox/jquery.fancybox.min.js"></script>




  
<script src="/blog/js/tocbot.min.js"></script>

  <script>
    // Tocbot_v4.7.0  http://tscanlin.github.io/tocbot/
    tocbot.init({
      tocSelector: '.tocbot',
      contentSelector: '.article-entry',
      headingSelector: 'h1, h2, h3, h4, h5, h6',
      hasInnerContainers: true,
      scrollSmooth: true,
      positionFixedSelector: '.tocbot',
      positionFixedClass: 'is-position-fixed',
      fixedSidebarOffset: 'auto',
			onClick: (e) => {
      	document.getElementById(e.target.innerText).scrollIntoView()
      	return false;
    	}
    });
  </script>


<script>
  var ayerConfig = {
    mathjax: false
  }
</script>


<script src="/blog/js/ayer.js"></script>


<script src="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.css">



<script type="text/javascript" src="https://js.users.51.la/20544303.js"></script>
  
  

  </div>
</body>

</html>